<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns:required="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        .layui-iconpicker-body.layui-iconpicker-body-page .hide {
            display: none;
        }
    </style>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>


<body>
<div>
    <button onclick="getSessionId()">获取sessionId</button>
</div>
<div>
    <button onclick="openSocket()">开启socket</button>
</div>
<div>
    <button onclick="sendMessage()">发送消息</button>
</div>
<div>
    <button class="data-add-btn">测试</button>
</div>

<div hidden="hidden" id="menuform" style="margin: 10px 10px 10px 10px">
    <form class="layui-form " action="" lay-filter="menufrom">
        <div class="layui-form-item">
            <label id="msg">进度显示...</label>
        </div>
        <div class="layui-form-item">
            <div class="layui-progress layui-progress-big" lay-filter="demo">
                <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>
        </div>
    </form>
</div>


<script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['iconPickerFa', 'form', 'table', 'layer', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            element = layui.element;


        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = $(this).data('type');
            active[type] ? active[type].call(this, othis) : '';
        });


        //监听关闭
        $("#formDemoClose").on("click", function () {
            layer.closeAll('page');
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {

            //layer.msg('添加数据');
            layer.open({
                type: 1,
                title: "添加菜单",
                content: $("#menuform"),
                skin: 'layui-layer-molv',
                area: "25%",
                success: function (layero, index) {
                    var n = 0;
                    setInterval(function () {
                        element.progress('demo', n + '%');
                        n = n + 2;
                        if (n >= 100) {
                            n = 0;
                        }
                    }, 100)
                }
            });

            $.ajax({
                url: "/hwn/testWebSocket",
                method: "post",
                success: function (obj) {
                    alert(obj);
                }
            });
        });

    });
</script>
<script>

    var socket;
    var sessionId = '';


    $(function () {
        $.ajax({
            url: "/hwn/getSessionId",
            method: "post",
            success: function (obj) {
                sessionId = obj.msg;
            }
        });
    });

    function openSocket() {

        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {

            var socketUrl = "http://localhost:9999/imserver/" + sessionId;
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            if (socket != null) {
                socket.close();
                socket = null;
            }
            console.info(socketUrl);
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                console.log(msg.data);
                $('#msg').text(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

</script>
</body>

</html>
